<template>
	<view class="aricle">
		<Header :isHomepage="false"></Header>
		<view class="aricle_list">
			<view class="aricle_list_title">{{ pageTitle }}</view>
			<view class="aricle_list_box">
				<view class="aricle_list_box_item" v-for="(item, index) in dataList" @click="goToDetail(item.id)">
					<image :src="item.image" alt="" mode="aspectFit"/>
					<view class="aricle_list_box_item_text">
						<text>{{ item.title }}</text>
						<text>{{ item.desc }}</text>
					</view>
				</view>
				<view class="aricle_list_box_btn" >
					<button @click="handlerMore" v-if="isShowMore">加载更多</button>
					<text v-else class="aricle_list_box_btn_noneMore">没有更多了~</text>
				</view>
			</view>
		</view>
		<Footer></Footer>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app'
	import Header from '@/components/header/index.vue'
	import Footer from '@/components/footer/index.vue'
	import { ref, defineProps } from 'vue';
	import { articleCateList } from '@/api/article.js'
	const pageTitle = ref('天堂文章资讯')
	const dataList = ref([]) // 数据列表
	const count = ref(0) // 数据总数
	const dataType = ref(3) // 天堂咨询
	const page_no = ref(1)
	const page_size = ref(25)
	const isShowMore = ref(false)
	const getDataList = async () => {
		let obj = {
			page_no: page_no.value,
			page_size: page_size.value,
			pid: dataType.value
		}
		articleCateList(obj).then(res=>{
			console.log(res)
			if(res.code == 1){
				dataList.value = [...dataList.value, ...res.data.lists]
				count.value = res.data.count
				
				if(dataList.value.length < count.value){
					isShowMore.value = true
				}else{
					isShowMore.value = false
				}
			}
		}).catch(error=>{
			console.log(error)
		})
	}
	
	// 点击更多
	const handlerMore = () => {
		if(dataList.value.length < count.value){
			page_no.value += 1
			getDataList()
		}
	}
	// 去文章详情
	const goToDetail = (id: number) => {
		uni.navigateTo({
			url: '/pages/article/detail?id=' + id + '&pageTitle=' + pageTitle.value
		})
	}
	onLoad(async(options)=>{
		if(options.pid){
			dataType.value = options.pid
			pageTitle.value = options.title
		}
		getDataList()
	})
</script>

<style lang="scss">
	.aricle {
		display: flex;
		flex-direction: column;
		min-height: 100vh; /* Ensure container takes full height */
		background-color: #f5f5f5; /* Match background color */
		padding-bottom: 40rpx; /* Add some padding at the bottom */
		box-sizing: border-box; /* Include padding in height calculation */
		.aricle_list{
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			
			.aricle_list_title{
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}
			.aricle_list_box{
				display: flex;
				flex-flow: column;
				align-items: flex-start;
				padding: 15rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				.aricle_list_box_item{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					width: 100%;
					height: 180rpx;
					padding: 5rpx;
					box-sizing: border-box;
					border-bottom: #E3E3E3 1px dotted;
					image{
						width: 150rpx;
						height: 150rpx;
					}
					.aricle_list_box_item_text{
						width: calc(100% - 170rpx);
						margin-left: 20rpx;
						height: 100%;
						display: flex;
						flex-flow: column;
						align-items: flex-start;
						justify-content: flex-start;
						text{
							&:nth-child(2){
								display: -webkit-box;  /* 兼容旧版浏览器 */
								-webkit-line-clamp: 2;   /* 显示两行 */
								-webkit-box-orient: vertical;    /* 子元素在垂直方向排列 */
								overflow: hidden;
								text-overflow: ellipsis;
								color: #999;
								font-size: 24rpx;
								margin-top: 10rpx;
							}
						}
					}
				}
				.aricle_list_box_btn{
					width: 100%;
					margin-top: 20rpx;
					.aricle_list_box_btn_noneMore{
						font-size: 24rpx;
						color: #999;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>